<template>
<el-form ref="form" :model="form" label-width="80px"  v-loading="form_loading">
  <el-button type="primary" class="goback_btn" @click="goback"> 返回 </el-button>
<el-form-item label="角色名称"   :rules="{
      required: true, message: '角色名不能为空', trigger: 'blur'
    }">
    <el-input v-model="form.roleName" :xs="8" :sm="6" :md="4" :lg="3" :xl="1"></el-input>
  </el-form-item >
    <el-form-item label="描述" :rules="{
      required: true, message: '描述不能为空', trigger: 'blur'
    }">
    <el-input v-model="form.remark" :xs="8" :sm="6" :md="4" :lg="3" :xl="1"></el-input>
  </el-form-item>
<el-tree
  :data="data2"
  show-checkbox
  default-expand-all
  node-key="id"
  ref="tree"
  highlight-current
   @check-change="handleCheckChange"
   v-loading="tree_loading"
  :props="defaultProps">
</el-tree>

 <!-- <div class="buttons">
   <el-button @click="getCheckedNodes">通过 node 获取</el-button>
   <el-button @click="getCheckedKeys">通过 key 获取</el-button>
   <el-button @click="setCheckedNodes">通过 node 设置</el-button>
   <el-button @click="setCheckedKeys">通过 key 设置</el-button>
   <el-button @click="resetChecked">清空</el-button>
 </div> -->
 <el-button type="success" class="goback_btn" @click="upload">提交</el-button>
   <!-- <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button> -->
</el-form>
</template>
<script>
import { getMenuList, CreateRole, getRoleDetail } from '@/api/system/role'
import { treeDataTranslate } from '@/utils/translate_tree.js'
import axios from 'axios'
import $http from '@/utils/httpRequest.js'
// import back from '@/directive/goback/goback.js'
export default {
  methods: {
    handle_show_msg() {

    },
    handleCheckChange(e) {
      // this.$refs.tree.setCheckedKeys([200, 203, 400])
    },
    getCheckedNodes() {

    },
    getCheckedKeys() {
      console.log(this.$refs.tree.getCheckedKeys())
    },
    setCheckedNodes() {
      this.$refs.tree.setCheckedNodes([{
        id: 5,
        label: '二级 2-1'
      }, {
        id: 9,
        label: '三级 1-1-1'
      }])
    },
    setCheckedKeys() {
      this.$refs.tree.setCheckedKeys([3])
    },
    resetChecked() {
      this.$refs.tree.setCheckedKeys([])
    },
    goback() {
      this.$router.go(-1)
    },
    upload() {
      const upload_list = []
      this.$refs.form.validate((valid) => {
        //   成功
        if (valid) {
          const node = this.$refs.tree.getCheckedNodes()
          node.forEach((val, index, i) => {
            console.log(node[index].menuId)
            upload_list.push(node[index].id)
          })

          this.form.menuIdList = upload_list

          $http({
            url: `/sys/rolegroup/${!this.show_msg ? 'save' : 'update'}`,
            method: 'post',
            data: $http.adornData({
              'roleId': this.form.id || undefined,
              'roleName': this.form.roleName,
              'remark': this.form.remark,
              'menuIdList': this.form.menuIdList
            })
          }).then(({ data }) => {
            if (data && data.code === 200) {
              this.$notify({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.goback()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })

        //   失败
        } else {
          return false
        }
      })
    }

  },
  created() {
    console.log('axios_________________________')
    console.log(axios)
    // const msg = {}
  },
  mounted() {
    const library_id = this.$route.query.edit_msg
    this.tree_loading = true
    getMenuList().then((e) => {
      this.tree_loading = false
      const data = treeDataTranslate(e.data, 'id')
      this.data2 = data
      if (library_id) {
        const roleId = JSON.parse(library_id).roleId
        this.form_loading = true
        getRoleDetail(roleId).then((e) => {
          this.form_loading = false
          this.show_msg = e.data
          this.form.id = e.data.role.roleId
          this.form.roleName = e.data.role.roleName
          this.form.remark = e.data.role.remark
          // const check_node = treeDataTranslate(data, 'menuId')
          this.$refs.tree.setCheckedKeys(e.data.role.menuIdList)
        }).catch((e) => {
          this.form_loading = false
          this.$Message.error(e.data.msg)
        })
      }
    }).catch((e) => {
      console.log(e)
      this.tree_loading = false
      // this.$Message.error(e)
    })
  },
  data() {
    return {
      need_check_node: [],
      form_loading: false,
      show_msg: undefined,
      tree_loading: false,
      form: {
        roleName: '',
        remark: '',
        status: 1,
        menuIdList: []
      },
      data2: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  }
}
</script>